<template>
    <view>
        <!-- pages/wallpaper/wallpaper.wxml -->
        <view class="topbox">
            <cu-custom :isShowicon="false" :isBack="true">
                <view slot="backText" @tap="gotoSign">
                    <image src="/static/images/topbtn.png" mode="widthFix" style="width: 260rpx; height: 50rpx"></image>
                </view>
                <view slot="content">壁纸</view>
            </cu-custom>
        </view>
        <view class="wallpaper">
            <view class="wallpaperitem margin-lr-sm margin-top-sm" @tap="previewImage" :data-src="item" v-for="(item, index) in list" :key="index">
                <image :src="item" mode="widthFix"></image>
            </view>
        </view>

        <bar :tabon="1"></bar>
    </view>
</template>

<script>
import bar from '../../components/Bar';
// pages/wallpaper/wallpaper.js
const _api = require('../../utils/api.js');
const apiurl = require('../../utils/apiurl/public.js');
export default {
    components: {
        bar
    },
    data() {
        return {
            list: [],
            isOver: false,

            //是否加载完成
            isLoading: false,

            pageparams: {
                page: 1,
                limit: 10
            },

            pagenum: 0
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        let pagenum = 'pageparams.page';
        this.setData({
            list: [],
            [pagenum]: 1
        });
        this.getList();
        uni.stopPullDownRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        if (this.isLoading) {
            return;
        }
        if (this.isOver) {
            return;
        }
        let pagenum = 'pageparams.page';
        let page = this.pageparams.page;
        this.setData({
            [pagenum]: (page += 1)
        });
        this.getList();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        previewImage(e) {
            //图片预览预览
            console.log(e);
            var current = e.currentTarget.dataset.src;
            var imgList = [current];
            // for (let i = 0; i < this.data.wawa.length; i++) {
            // imgList.push(this.data.wawa[i].img_url);
            // }
            uni.previewImage({
                current: current,
                //当前点击的图片链接
                urls: imgList //图片数组
            });
        },

        getList() {
            uni.showLoading({
                title: '数据加载中'
            });
            this.setData({
                isLoading: true
            });
            _api.get(apiurl.wallpaper, {
                ...this.pageparams
            }).then((res) => {
                console.log(res);
                this.setData({
                    isLoading: false
                });
                uni.hideLoading();
                if (res.data.code == 0) {
                    let newlist;
                    if (this.pageparams.page > 1) {
                        newlist = [this.list, ...res.data.data];
                    } else {
                        newlist = res.data.data;
                    }
                    if (res.data.data.length < this.pageparams.limit) {
                        this.setData({
                            isOver: true
                        });
                    }
                    this.setData({
                        list: newlist
                    });
                    console.log(this.list);
                }
            });
        },

        gotoSign() {
            uni.navigateTo({
                url: '/pages/signin/signin'
            });
        }
    }
};
</script>
<style>
/* pages/wallpaper/wallpaper.wxss */
page {
    background: #ffffff;
    padding-bottom: 120rpx;
    padding-top: 160rpx;
}
.wallpaperitem {
    border-radius: 12rpx;
    overflow: hidden;
}
.wallpaperitem image {
    width: 100%;
    display: block;
}
</style>
